<template>
  <div class="iframe_box">
    <iframe
    allowtransparency="true"
      class="iframe"
      v-show="iframeData"
      frameborder="0"
      :src="iframeSite"
      ref="iframeBox"
    ></iframe>
    <div class="iframe_logding" v-show="!iframeData">
      <joys-loading></joys-loading>
    </div>
  </div>
</template>

<script>
import JoysLoading from "@/pages/mobile/components/JoysLoading/JoysLoading";
export default {
  name: "IframeIndex",
  components: {
    JoysLoading
  },
  data () {
    return {
      iframeSite: "",
      iframeData: false
    };
  },
  created () { },
  methods: {},
  mounted () {
    this.iframeData = false
    setTimeout(() => {
      this.iframeData = true;
    }, 1500);
  },
  activated () {
    if (this.$route.query.site) {
      return this.iframeSite = this.$route.query.site
    } else {
      // this.iframeSite = this.$route.query.taskParameter.routeUrl 
      this.iframeSite = this.$route.query.taskParameter.routeUrl + '?' + 'busiId' + '=' + this.$route.query.taskParameter.busiId + '&' + 'taskId' + '=' +this.$route.query.taskParameter.taskId
    }
  },
};
</script>

<style lang="less" scoped>
.iframe_box {
  width: 100%;
  height: 100%;
  z-index: 300;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .iframe_logding {
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 45%;
    background: #fff;
    overflow: hidden;
  }
  .iframe {
    width: 100%;
    height: 100%;
  }
}
</style>
